<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title></title>
</head>
<body>
   事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

<!-- 点击操作同样的效果 -->
	<!-- <ul id="ul1">
	    <li>111</li>
	    <li>222</li>
	    <li>333</li>
	    <li>444</li>
	</ul> -->

    
<!-- 点击操作不同的效果 -->
    <div id="box">
        <input type="button" id="add" value="添加" />
        <input type="button" id="remove" value="删除" />
        <input type="button" id="move" value="移动" />
        <input type="button" id="select" value="选择" />
    </div>


<!-- 添加新节点并会直接给节点添加上事件 -->
    <input type="button" name="" id="btn" value="添加" />
    <ul id="ul1">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>
</body>
<!-- 例子 -->
<!-- 点击li弹出123 同样的效果-->
<script type="text/javascript">
	window.onload = function(){
	　　var oUl = document.getElementById("ul1");
	　　oUl.onclick = function(ev){
	　　　　var ev = ev || window.event;
	　　　　var target = ev.target || ev.srcElement;
	　　　　if(target.nodeName.toLowerCase() == 'li'){
	　 　　　　　　 alert(123);
	　　　　　　　  alert(target.innerHTML);
	　　　　}
	　　}
	}


//点击操作不同的效果
    window.onload = function(){
        var oBox = document.getElementById("box");
        oBox.onclick = function (ev) {
            var ev = ev || window.event;
            var target = ev.target || ev.srcElement;
            if(target.nodeName.toLocaleLowerCase() == 'input'){
                switch(target.id){
                    case 'add' :
                        alert('添加');
                        break;
                    case 'remove' :
                        alert('删除');
                        break;
                    case 'move' :
                        alert('移动');
                        break;
                    case 'select' :
                        alert('选择');
                        break;
                }
            }
        }
        
    }

// 添加新节点并直接给新节点添加上事件
    window.onload = function(){
        var oBtn = document.getElementById("btn");
        var oUl = document.getElementById("ul1");
        var aLi = oUl.getElementsByTagName('li');
        var num = 4;
        
        //事件委托，添加的子元素也有事件
        oUl.onmouseover = function(ev){
            var ev = ev || window.event;
            var target = ev.target || ev.srcElement;
            if(target.nodeName.toLowerCase() == 'li'){
                target.style.background = "red";
            }
            
        };
        oUl.onmouseout = function(ev){
            var ev = ev || window.event;
            var target = ev.target || ev.srcElement;
            if(target.nodeName.toLowerCase() == 'li'){
                target.style.background = "#fff";
            }
            
        };
        
        //添加新节点
        oBtn.onclick = function(){
            num++;
            var oLi = document.createElement('li');
            oLi.innerHTML = 111*num;
            oUl.appendChild(oLi);
        };
    }
</script>
</html>